@mapbox/unitbezier

What is @mapbox/unitbezier?

@mapbox/unitbezier is a JavaScript library for working with unit Bezier curves. It allows you to create and manipulate cubic Bezier curves, which are commonly used in animations and transitions in web development.

What are @mapbox/unitbezier's main functionalities?

Creating a UnitBezier instance

This feature allows you to create a new instance of a UnitBezier curve by specifying the control points. The control points determine the shape of the Bezier curve.

const UnitBezier = require('@mapbox/unitbezier');
const bezier = new UnitBezier(0.42, 0, 0.58, 1);

Solving for X given T

This feature allows you to solve for the X coordinate of the Bezier curve given a parameter T. This is useful for animations where you need to determine the position of an element at a specific point in time.

const x = bezier.solve(0.5, UnitBezier.prototype.epsilon);

Solving for Y given T

This feature allows you to solve for the Y coordinate of the Bezier curve given a parameter T. Similar to solving for X, this is useful for determining the vertical position of an element in an animation.

const y = bezier.solve(0.5, UnitBezier.prototype.epsilon, 'y');

Other packages similar to @mapbox/unitbezier

bezier-easing

The bezier-easing package provides similar functionality for creating and manipulating cubic Bezier curves. It is widely used for easing animations and transitions. Compared to @mapbox/unitbezier, bezier-easing offers a more user-friendly API and additional features like pre-defined easing functions.

cubic-bezier

The cubic-bezier package is another alternative for working with cubic Bezier curves. It offers a simple API for creating Bezier curves and solving for coordinates. While it provides similar core functionalities as @mapbox/unitbezier, it lacks some of the advanced features and optimizations found in @mapbox/unitbezier.

README

unitbezier

Unit bezier interpolation function: a port to JavaScript from Webkit:

http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/UnitBezier.h

api

new UnitBezier(p1x, p1y, p2x, p2y)

Initialize a new bezier curve given the points

bezier.solve(x, epsilon)

Evaluate bezier for value x (ranging from 0 to 1) with epsilon precision (1e-6 by default).